<template>
  <div class="content">
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
    >
      <el-form-item label="消费时间">
        <BiDatePicker
          v-model="formInline.bay_time"
          clearable
          style="width:380px;"
          size="small"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="充值视频">
        <el-select
          ref="select"
          v-model="formInline.playlet_id"
          filterable
          remote
          :remote-method="selectChange"
          clearable
          placeholder="请选择充值视频"
          :loading="selectLoading"
          @focus="mobileClear"
          @hook:mounted="mobileClear"
          @visible-change="mobileClear"
        >
          <el-option
            v-for="item in playletList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="loading"
          type="primary"
          style="margin-left:10px;"
          @click="startSearch"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-table">
      <BiTable
        :loading="loading"
        :data="tableData"
        size="medium"
        :column="tableColums"
        fixed="sticky"
        fixed-offset="50"
        pagination
        layout="total, prev, pager, next"
        :auto-scroll="false"
        :total="page_info.total"
        :page.sync="page_info.page"
        :limit.sync="page_info.page_size"
        @pagination="handlePageChange"
      >

      </BiTable>
    </div>
  </div>
</template>

<script>
import { buyRecord } from '@/api/userPage'
import { commonData } from '@/api/common'
import { formatNumber } from '@/utils/index'
export default {
  props: ['rowInfo'],
  data() {
    return {
      formInline: {
        bay_time: [],
        playlet_id: '',
        buy_time_start: '',
        buy_time_end: '',
        member_id: ''
      },
      formatNumber: formatNumber,
      selectLoading: false,
      playletList: [],
      videoList: [],
      loading: false,
      tableData: [],
      tableColums: [
        {
          label: 'ID',
          prop: 'id'
        },
        {
          label: '消费时间',
          prop: 'buy_time'
        },
        {
          label: '短剧名称',
          prop: 'playlet_title',
          width: 250
        },
        {
          label: '剧集名称',
          prop: 'chapter_title',
          width: 250
        },
        {
          label: '消耗喵币',
          prop: 'coin',
          render: (h, { row }) => {
            return <span>{formatNumber(row.coin)} </span>
          }
        },
        {
          label: '消耗赠币',
          prop: 'free_coin',
          render: (h, { row }) => {
            return <span>{formatNumber(row.free_coin)} </span>
          }
        },
        {
          label: '消费集数',
          prop: 'chapter_count',
          render: (h, { row }) => {
            if (row.chapter_count * 1) {
              return <span>消耗{formatNumber(row.chapter_count)}集</span>
            } else {
              return <span>-</span>
            }
          }
        }
      ],
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      }
    }
  },
  mounted() {
    this.clickSearch('type')
    this.requestChapter('')
  },
  methods: {
    // 执行这个重新获取焦点的方法 就可以了
    mobileClear(async) {
      this.$nextTick(() => {
        if (!async) {
          // ios 手机有延迟问题
          setTimeout(() => {
            const { select } = this.$refs
            const input = select.$el.querySelector('.el-input__inner')
            input.removeAttribute('readonly')
          }, 200)
        }
      })
    },
    handlePageChange(page) {
      this.page_info.page = page.page
      this.clickSearch()
    },
    startSearch() {
      this.page_info.page = 1
      this.clickSearch()
    },
    selectChange(query) {
      if (query !== '') {
        this.selectLoading = true
        this.requestChapter(query)
      }
    },
    requestChapter(query) {
      commonData({ type: 'playlet', value: query }).then((res) => {
        this.selectLoading = false
        this.playletList = res.data.data
      })
    },
    clickSearch(type) {
      const data = {
        playlet_id: this.formInline.playlet_id,
        buy_time_start: (this.formInline.bay_time && this.formInline.bay_time[0]) || '',
        buy_time_end: (this.formInline.bay_time && this.formInline?.bay_time[1]) || '',
        member_id: this.rowInfo.member_id
      }
      this.loading = true
      buyRecord({ ...data, ...this.page_info }).then((res) => {
        if (res.status_code === 1) {
          this.tableData = res.data.data
          this.page_info = res.data.page_info
          if (res.status_code === 1) {
            !type ? this.$message.success(res.msg) : ''
          }
          this.loading = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>